<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练安排 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --technical-color: #4361ee;
            --fitness-color: #06d6a0;
            --tactical-color: #ef476f;
            --match-color: #ffd166;
            --dark-color: #2b2d42;
            --light-color: #f8f9fa;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 15px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
            --transition-fast: all 0.2s ease;
            --transition-normal: all 0.3s ease;
            --transition-slow: all 0.5s ease;
        }
        .training-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            padding-bottom: 20px;
        }
        
        .page-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
            border-radius: 3px;
        }
        
        .page-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
            transition: var(--transition-normal);
        }
        
        .page-title:hover {
            color: var(--primary-color);
        }
        
        .page-subtitle {
            color: #666;
            font-size: 1.1rem;
        }
        
        .calendar-container {
            background: white;
            border-radius: 15px;
            box-shadow: var(--shadow-md);
            margin-bottom: 40px;
            overflow: hidden;
            transition: var(--transition-normal);
        }
        
        .calendar-container:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .calendar-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .calendar-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        .calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .calendar-nav button {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: var(--transition-normal);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .calendar-nav button:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }
        
        .calendar-nav button:active {
            transform: translateY(0);
        }
        
        .current-month {
            font-size: 1.5rem;
            font-weight: bold;
            position: relative;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            background: #f0f0f0;
        }
        
        .calendar-day-header {
            background: #f8f9fa;
            padding: 15px 10px;
            text-align: center;
            font-weight: bold;
            color: #666;
            font-size: 0.9rem;
            transition: var(--transition-normal);
        }
        
        .calendar-day-header:hover {
            background: #f0f0f0;
        }
        
        .calendar-day {
            background: white;
            min-height: 100px;
            padding: 10px;
            position: relative;
            cursor: pointer;
            transition: var(--transition-normal);
        }
        
        .calendar-day:hover {
            background: #f8f9fa;
            transform: scale(1.02);
            z-index: 5;
            box-shadow: var(--shadow-sm);
        }
        
        .calendar-day.other-month {
            background: #f8f9fa;
            color: #ccc;
        }
        
        .calendar-day.today {
            background: rgba(67, 97, 238, 0.1);
            border: 2px solid var(--primary-color);
        }
        
        .calendar-day.has-training::after {
            content: '';
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--primary-color);
        }
        
        .day-number {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 1rem;
            color: #333;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            transition: var(--transition-normal);
        }
        
        .calendar-day:hover .day-number {
            background: var(--primary-color);
            color: white;
        }
        
        .training-event {
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: var(--transition-fast);
            position: relative;
            cursor: pointer;
        }
        
        .training-event:hover {
            transform: translateX(3px) scale(1.03);
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
            z-index: 4;
        }
        
        .training-event::after {
            content: attr(title);
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 8px;
            padding: 5px 10px;
            background: #333;
            color: white;
            border-radius: 4px;
            white-space: nowrap;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-normal);
            font-size: 0.7rem;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            width: auto;
            max-width: 250px;
            white-space: normal;
            text-align: left;
        }
        
        .training-event:hover::after {
            opacity: 1;
            visibility: visible;
        }
        
        .training-event.technical {
            background: var(--technical-color);
        }

        .training-event.fitness {
            background: var(--fitness-color);
        }

        .training-event.tactical {
            background: var(--tactical-color);
        }

        .training-event.match {
            background: var(--match-color);
            color: #333;
            font-weight: 500;
        }
        
        .daily-training-note {
            font-size: 0.7rem;
            color: #666;
            margin-top: 5px;
            line-height: 1.4;
            padding-left: 3px;
            border-left: 2px solid #eee;
            transition: var(--transition-normal);
        }
        
        .calendar-day:hover .daily-training-note {
            border-left-color: var(--accent-color);
            color: #444;
        }
        
        .schedule-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: var(--shadow-md);
            margin-bottom: 30px;
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
        }
        
        .schedule-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
            opacity: 0;
            transition: var(--transition-normal);
        }
        
        .schedule-section:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-3px);
        }
        
        .schedule-section:hover::before {
            opacity: 1;
        }
        
        .section-title {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition-normal);
            position: relative;
            padding-left: 10px;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 60%;
            background: var(--primary-color);
            border-radius: 2px;
            opacity: 0;
            transition: var(--transition-normal);
        }
        
        .schedule-section:hover .section-title::before {
            opacity: 1;
        }
        
        .section-title i {
            transition: var(--transition-normal);
        }
        
        .schedule-section:hover .section-title i {
            transform: rotate(5deg) scale(1.1);
            color: var(--primary-color);
        }
        
        .schedule-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .schedule-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--shadow-sm);
            border-left: 4px solid #667eea;
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .schedule-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
            background: rgba(67, 97, 238, 0.1);
            z-index: 0;
            transition: var(--transition-normal);
        }

        .schedule-card:hover::before {
            width: 60px;
            height: 60px;
        }

        .schedule-card.technical::before {
            background: rgba(67, 97, 238, 0.1);
        }

        .schedule-card.fitness::before {
            background: rgba(6, 214, 160, 0.1);
        }

        .schedule-card.tactical::before {
            background: rgba(239, 71, 111, 0.1);
        }

        .schedule-card.match::before {
            background: rgba(255, 209, 102, 0.1);
        }

        .schedule-type-icon {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.5rem;
            opacity: 0.1;
            transition: var(--transition-normal);
        }

        .schedule-card:hover .schedule-type-icon {
            opacity: 0.2;
            transform: scale(1.2);
        }

        .schedule-card.technical {
            border-color: var(--technical-color);
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.05) 0%, #ffffff 100%);
        }

        .schedule-card.fitness {
            border-color: var(--fitness-color);
            background: linear-gradient(135deg, rgba(6, 214, 160, 0.05) 0%, #ffffff 100%);
        }

        .schedule-card.tactical {
            border-color: var(--tactical-color);
            background: linear-gradient(135deg, rgba(239, 71, 111, 0.05) 0%, #ffffff 100%);
        }

        .schedule-card.match {
            border-color: var(--match-color);
            background: linear-gradient(135deg, rgba(255, 209, 102, 0.05) 0%, #ffffff 100%);
        }
        
        .schedule-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: var(--shadow-md);
        }
        
        .schedule-time {
            font-size: 1.2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
            transition: var(--transition-normal);
            position: relative;
            padding-left: 5px;
        }
        
        .schedule-card:hover .schedule-time {
            padding-left: 10px;
        }
        
        .schedule-time::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 60%;
            background: rgba(102, 126, 234, 0.2);
            border-radius: 2px;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-time::before {
            width: 3px;
        }
        
        .schedule-title {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 8px;
            font-weight: bold;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-title {
            color: var(--primary-color);
            padding-left: 5px;
        }
        
        .schedule-description {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 10px;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-description {
            color: #444;
        }
        
        .schedule-meta {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            padding-top: 15px;
            margin-top: 15px;
            border-top: 1px solid rgba(0,0,0,0.08);
            font-size: 0.8rem;
            color: #888;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-meta {
            border-top-color: rgba(102, 126, 234, 0.2);
        }
        
        .schedule-location {
            display: flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-location {
            color: #666;
        }
        
        .schedule-coach {
            display: flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-coach {
            color: #666;
        }
        
        .stats-summary {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: var(--shadow-md);
            transition: var(--transition-normal);
        }
        
        .stats-summary:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
        
        .summary-stat {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            transition: var(--transition-normal);
            cursor: pointer;
        }

        .summary-stat:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: var(--shadow-md);
            z-index: 5;
        }

        .summary-stat::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
            transform: translateX(-100%);
            transition: var(--transition-normal);
        }
        
        .summary-stat:hover::after {
            transform: translateX(0);
        }
        
        .summary-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
            transition: var(--transition-normal);
            position: relative;
            display: inline-block;
        }
        
        .summary-stat:hover .summary-number {
            transform: scale(1.1);
            color: var(--primary-color);
        }
        
        .summary-number::after {
            content: attr(data-unit);
            font-size: 0.8rem;
            margin-left: 5px;
            opacity: 0.7;
        }
        
        .summary-label {
            color: #666;
            font-size: 0.9rem;
            transition: var(--transition-normal);
        }
        
        .summary-stat:hover .summary-label {
            color: #333;
            font-weight: 500;
        }
        
        .filters-section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: var(--shadow-md);
            transition: var(--transition-normal);
        }
        
        .filters-section:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .filters-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-label {
            font-weight: bold;
            color: #333;
            font-size: 0.9rem;
            transition: var(--transition-normal);
        }
        
        .filter-select:focus + .filter-label {
            color: var(--primary-color);
        }
        
        .filter-select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
            min-width: 120px;
            transition: var(--transition-normal);
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            cursor: pointer;
        }
        
        .filter-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        
        .filter-select:hover {
            border-color: #aaa;
        }
        
        .search-box {
            flex: 1;
            min-width: 200px;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: var(--transition-normal);
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            transition: var(--transition-normal);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        
        .search-input:focus + i {
            color: var(--primary-color);
        }
        
        /* 训练阶段时间轴 */
        .timeline-container {
            position: relative;
            padding: 20px 0;
        }
        .timeline-track {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            transform: translateY(-50%);
            z-index: 1;
        }
        .timeline-progress {
            position: absolute;
            top: 50%;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
            transform: translateY(-50%);
            z-index: 2;
            width: 35%; /* 第一阶段完成进度 */
            transition: width 1s ease-in-out;
        }
        .timeline-stages {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 3;
        }
        .timeline-stage {
            width: 30%;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-normal);
            cursor: pointer;
        }
        .timeline-stage::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: white;
            border: 3px solid #e0e0e0;
            border-radius: 50%;
            z-index: 3;
            transition: var(--transition-normal);
        }
        .timeline-stage:nth-child(1)::before { left: 15%; }
        .timeline-stage:nth-child(2)::before { left: 50%; }
        .timeline-stage:nth-child(3)::before { left: 85%; }
        
        .timeline-stage.current {
            border: 2px solid var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }
        
        .timeline-stage.current::before {
            background: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
        }
        
        .timeline-stage.completed::before {
            background: var(--fitness-color);
            border-color: var(--fitness-color);
        }
        
        .timeline-stage:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-md);
        }
        
        .stage-month {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
            transition: var(--transition-normal);
        }
        
        .timeline-stage:hover .stage-month {
            color: var(--primary-color);
        }
        
        .stage-title {
            font-size: 1.1rem;
            margin-bottom: 8px;
            color: #333;
            transition: var(--transition-normal);
        }
        
        .timeline-stage:hover .stage-title {
            transform: scale(1.05);
        }
        
        .stage-goal {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
            transition: var(--transition-normal);
        }
        
        .timeline-stage:hover .stage-goal {
            color: #444;
        }
        
        .stage-status {
            margin-top: 10px;
            font-size: 0.8rem;
            padding: 3px 0;
            border-radius: 4px;
            transition: var(--transition-normal);
        }
        
        .stage-status.completed {
            background: #e8f5e9;
            color: #43a047;
        }
        
        .stage-status.ongoing {
            background: #fff3e0;
            color: #f57c00;
        }
        
        .stage-status.upcoming {
            background: #f5f5f5;
            color: #757575;
        }
        
        .timeline-stage:hover .stage-status {
            transform: scale(1.05);
        }

        /* 队员训练风采 */
        .players-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }
        .player-card {
            background: #f8f9fa;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-normal);
            cursor: pointer;
            position: relative;
        }
        
        .player-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(67, 97, 238, 0.05);
            opacity: 0;
            transition: var(--transition-normal);
            z-index: 1;
        }
        
        .player-card:hover::after {
            opacity: 1;
        }
        
        .player-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-md);
        }
        
        .player-photo {
            width: 100%;
            height: 200px;
            background: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        
        .player-photo::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%);
            z-index: 2;
            opacity: 0;
            transition: var(--transition-normal);
        }
        
        .player-card:hover .player-photo::before {
            opacity: 1;
        }
        
        .player-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-slow);
        }
        
        .player-card:hover .player-photo img {
            transform: scale(1.1);
        }
        
        .player-info {
            padding: 15px;
            position: relative;
            z-index: 2;
        }
        
        .player-name {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
            transition: var(--transition-normal);
            display: inline-block;
        }
        
        .player-card:hover .player-name {
            color: var(--primary-color);
            transform: translateX(5px);
        }
        
        .player-position {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 10px;
            transition: var(--transition-normal);
        }
        
        .player-card:hover .player-position {
            color: #444;
        }
        
        .player-progress {
            font-size: 0.9rem;
            color: #333;
            transition: var(--transition-normal);
            position: relative;
            padding-left: 5px;
        }
        
        .player-card:hover .player-progress {
            padding-left: 10px;
        }
        
        .player-progress::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            background: var(--primary-color);
            border-radius: 1px;
            transform: scaleY(0);
            transition: var(--transition-normal);
            transform-origin: bottom;
        }
        
        .player-card:hover .player-progress::before {
            transform: scaleY(1);
        }

        /* 教练团队介绍 */
        .coaches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }
        .coach-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            transition: var(--transition-normal);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .coach-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            background: rgba(67, 97, 238, 0.05);
            border-radius: 50%;
            transition: var(--transition-slow);
            z-index: 0;
        }
        
        .coach-card:hover::after {
            width: 300px;
            height: 300px;
            transform: translate(50%, -50%);
        }
        
        .coach-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }
        
        .coach-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #e0e0e0;
            overflow: hidden;
            flex-shrink: 0;
            transition: var(--transition-normal);
            border: 3px solid transparent;
            position: relative;
            z-index: 1;
        }
        
        .coach-card:hover .coach-avatar {
            transform: scale(1.1) rotate(5deg);
            border-color: rgba(67, 97, 238, 0.2);
        }
        
        .coach-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-normal);
        }
        
        .coach-card:hover .coach-avatar img {
            transform: scale(1.15);
        }
        
        .coach-details {
            flex-grow: 1;
            position: relative;
            z-index: 1;
        }
        
        .coach-name {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
            transition: var(--transition-normal);
        }
        
        .coach-card:hover .coach-name {
            color: var(--primary-color);
            transform: translateX(5px);
        }
        
        .coach-role {
            color: #667eea;
            font-size: 0.9rem;
            margin-bottom: 8px;
            transition: var(--transition-normal);
        }
        
        .coach-card:hover .coach-role {
            color: var(--secondary-color);
        }
        
        .coach-bio {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.4;
            transition: var(--transition-normal);
        }
        
        .coach-card:hover .coach-bio {
            color: #444;
        }

        /* 训练强度指示器 */
        .training-intensity {
            display: flex;
            align-items: center;
            margin-top: 10px;
            font-size: 0.8rem;
            color: #666;
        }

        .intensity-bars {
            display: flex;
            margin-left: 10px;
            gap: 3px;
        }

        .intensity-bar {
            width: 15px;
            height: 6px;
            border-radius: 3px;
            background: #e0e0e0;
            transition: var(--transition-normal);
        }

        .intensity-bar.active {
            background: var(--primary-color);
        }
        
        .intensity-bar:hover {
            transform: scaleY(1.5);
        }

        /* 训练注意事项 */
        .notes-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .note-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid #f5576c;
            transition: var(--transition-normal);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .note-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(245, 87, 108, 0.03) 0%, transparent 100%);
            opacity: 0;
            transition: var(--transition-normal);
        }
        
        .note-item:hover::before {
            opacity: 1;
        }
        
        .note-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-left-color: #e53e3e;
        }
        
        .note-title {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #333;
            transition: var(--transition-normal);
        }
        
        .note-item:hover .note-title {
            color: #e53e3e;
        }
        
        .note-title i {
            transition: var(--transition-normal);
        }
        
        .note-item:hover .note-title i {
            transform: rotate(10deg) scale(1.2);
        }
        
        .note-content {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
            transition: var(--transition-normal);
        }
        
        .note-item:hover .note-content {
            color: #444;
        }
        
        .note-content ul {
            padding-left: 20px;
            margin-top: 5px;
        }
        
        .note-content li {
            margin-bottom: 5px;
            transition: var(--transition-normal);
        }
        
        .note-item:hover .note-content li {
            transform: translateX(3px);
        }
        
        .training-status {
            position: absolute;
            top: 10px;
            right: -30px;
            width: 100px;
            padding: 4px 0;
            text-align: center;
            transform: rotate(45deg);
            font-size: 0.75rem;
            background: #667eea;
            color: white;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .training-status {
            right: -25px;
            padding: 5px 0;
            font-weight: bold;
        }
        
        .schedule-meta i {
            width: 18px;
            text-align: center;
            color: #667eea;
            transition: var(--transition-normal);
        }
        
        .schedule-card:hover .schedule-meta i {
            color: var(--primary-color);
            transform: scale(1.2);
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .modal.active {
            display: flex;
            opacity: 1;
        }
        
        .modal-content {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 30px;
            position: relative;
            transform: translateY(-20px) scale(0.95);
            transition: all 0.3s ease;
        }
        
        .modal.active .modal-content {
            transform: translateY(0) scale(1);
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
            transition: var(--transition-normal);
        }
        
        .modal-close:hover {
            color: #e53e3e;
            transform: rotate(90deg);
        }
        
        .modal-title {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(67, 97, 238, 0.1);
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .modal-details {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .detail-label {
            font-weight: bold;
            color: #666;
            align-self: center;
        }
        
        .detail-value {
            color: #333;
        }
        
        .modal-description {
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px;
        }
        
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .modal-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: var(--transition-normal);
        }
        
        .modal-btn-primary {
            background: var(--primary-color);
            color: white;
        }
        
        .modal-btn-primary:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .modal-btn-secondary {
            background: #f1f1f1;
            color: #666;
        }
        
        .modal-btn-secondary:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .schedule-section, .stats-summary, .filters-section, .calendar-container {
            animation: fadeIn 0.5s ease forwards;
            opacity: 0;
        }
        
        .schedule-section:nth-child(1) { animation-delay: 0.1s; }
        .schedule-section:nth-child(2) { animation-delay: 0.2s; }
        .schedule-section:nth-child(3) { animation-delay: 0.3s; }
        .schedule-section:nth-child(4) { animation-delay: 0.4s; }
        .schedule-section:nth-child(5) { animation-delay: 0.5s; }
        .schedule-section:nth-child(6) { animation-delay: 0.6s; }
        .schedule-section:nth-child(7) { animation-delay: 0.7s; }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>排球队管理系统</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index_qiu.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/about.html">
                        <i class="fas fa-info-circle"></i>
                        球队介绍
                    </a>
                </li>
                <li>
                    <a href="../players/list.html">
                        <i class="fas fa-users"></i>
                        队员信息
                    </a>
                </li>
                <li>
                    <a href="../matches/matches.html">
                        <i class="fas fa-trophy"></i>
                        比赛管理
                    </a>
                </li>
                <li class="active">
                    <a href="training.html">
                        <i class="fas fa-dumbbell"></i>
                        训练安排
                    </a>
                </li>
                <li>
                    <a href="../knowledge/index.html">
                        <i class="fas fa-book"></i>
                        排球知识
                    </a>
                </li>
                <li>
                    <a href="../notifications/detail.html">
                        <i class="fas fa-bell"></i>
                        通知管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>排球队管理系统</h1>
            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToMainPage()">
                    <i class="fas fa-exchange-alt"></i> 流光小队
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="training-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">训练安排</h1>
                    <p class="page-subtitle">查看和管理球队的训练计划</p>
                </div>

                <!-- 统计摘要 -->
                <div class="stats-summary">
                    <div class="stats-grid">
                        <div class="summary-stat" onclick="showStatDetails('本周训练', '5次训练', '包括2次技术训练、1次体能训练、1次战术训练和1次比赛训练')">
                            <div class="summary-number" data-unit="次">5</div>
                            <div class="summary-label">本周训练</div>
                        </div>
                        <div class="summary-stat" onclick="showStatDetails('本月训练', '20次训练', '总时长达到60小时，平均每次训练3小时')">
                            <div class="summary-number" data-unit="次">20</div>
                            <div class="summary-label">本月训练</div>
                        </div>
                        <div class="summary-stat" onclick="showStatDetails('出勤率', '85%', '全队平均出勤率，主力队员出勤率达92%')">
                            <div class="summary-number" data-unit="">85%</div>
                            <div class="summary-label">出勤率</div>
                        </div>
                        <div class="summary-stat" onclick="showStatDetails('专业教练', '3名教练', '分别负责技术、体能和战术训练指导')">
                            <div class="summary-number" data-unit="名">3</div>
                            <div class="summary-label">专业教练</div>
                        </div>
                        <div class="summary-stat" onclick="showStatDetails('训练场地', '2个场地', '主体育馆用于战术和比赛训练，训练馆用于技术和体能训练')">
                            <div class="summary-number" data-unit="个">2</div>
                            <div class="summary-label">训练场地</div>
                        </div>
                        <div class="summary-stat" onclick="showStatDetails('总训练小时', '120小时', '本年度累计训练时长，平均每周10小时')">
                            <div class="summary-number" data-unit="小时">120</div>
                            <div class="summary-label">总训练小时</div>
                        </div>
                    </div>
                </div>

                <!-- 筛选器 -->
                <div class="filters-section">
                    <div class="filters-row">
                        <div class="search-box">
                            <input type="text" class="search-input" placeholder="搜索训练内容..." id="searchInput" oninput="filterTrainings()">
                            <i class="fas fa-search"></i>
                        </div>
                        <div class="filter-group">
                            <select class="filter-select" id="typeFilter" onchange="filterTrainings()">
                                <option value="">全部类型</option>
                                <option value="技术训练">技术训练</option>
                                <option value="体能训练">体能训练</option>
                                <option value="战术训练">战术训练</option>
                                <option value="比赛训练">比赛训练</option>
                            </select>
                            <label class="filter-label">训练类型</label>
                        </div>
                        <div class="filter-group">
                            <select class="filter-select" id="coachFilter" onchange="filterTrainings()">
                                <option value="">全部教练</option>
                                <option value="张教练">张教练</option>
                                <option value="李教练">李教练</option>
                                <option value="王教练">王教练</option>
                            </select>
                            <label class="filter-label">教练</label>
                        </div>
                        <div class="filter-group">
                            <select class="filter-select" id="venueFilter" onchange="filterTrainings()">
                                <option value="">全部场地</option>
                                <option value="主体育馆">主体育馆</option>
                                <option value="训练馆">训练馆</option>
                            </select>
                            <label class="filter-label">场地</label>
                        </div>
                    </div>
                </div>

                <!-- 日历视图 -->
                <div class="calendar-container">
                    <div class="calendar-header">
                        <div class="calendar-nav">
                            <button onclick="previousMonth()">
                                <i class="fas fa-chevron-left"></i> 上月
                            </button>
                            <div class="current-month" id="currentMonth">2024年2月</div>
                            <button onclick="nextMonth()">
                                下月 <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="calendar-grid" id="calendarGrid">
                        <!-- 日历将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 本周训练安排 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-calendar-week"></i>
                        本周训练安排
                    </h2>
                    <div class="schedule-grid" id="weeklySchedule">
                        <!-- 训练安排卡片将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 训练阶段时间轴 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-route"></i>
                        近3个月训练阶段规划
                    </h2>
                    <p style="color: #666; margin-bottom: 30px; text-align: center;">按"基础巩固→战术强化→实战检验"递进，阶段性提升球队综合能力</p>
                    <div class="timeline-container">
                        <div class="timeline-track"></div>
                        <div class="timeline-progress"></div>
                        <div class="timeline-stages">
                            <!-- 第一阶段 -->
                            <div class="timeline-stage current completed" onclick="showStageDetails('基础技术巩固', '2024年2月', '提升发球/一传成功率至70%', '每日基础技术循环训练，重点强化发球、垫球和扣球基础动作，通过分解练习和反复训练形成肌肉记忆。每周进行技术测试，跟踪进步情况。')">
                                <div class="stage-month">2024年2月</div>
                                <div class="stage-title">基础技术巩固</div>
                                <div class="stage-goal">
                                    核心目标：提升发球/一传成功率至70%<br>
                                    关键训练：每日基础技术循环训练
                                </div>
                                <div class="stage-status completed">当前进度：80% 已完成</div>
                            </div>
                            <!-- 第二阶段 -->
                            <div class="timeline-stage" onclick="showStageDetails('战术配合强化', '2024年3月', '攻防转换速度提升10%', '分组对抗战术演练，重点练习快攻、交叉进攻等战术配合，提高队员间的默契度和场上沟通能力。引入视频分析，针对性改进战术执行。')">
                                <div class="stage-month">2024年3月</div>
                                <div class="stage-title">战术配合强化</div>
                                <div class="stage-goal">
                                    核心目标：攻防转换速度提升10%<br>
                                    关键训练：分组对抗战术演练
                                </div>
                                <div class="stage-status ongoing">状态：即将开始</div>
                            </div>
                            <!-- 第三阶段 -->
                            <div class="timeline-stage" onclick="showStageDetails('实战能力检验', '2024年4月', '比赛节奏把控能力强化', '每周2次全阵容模拟赛，模拟真实比赛环境和压力，提高队员比赛适应能力。邀请其他球队进行友谊赛，检验训练成果并针对性调整。')">
                                <div class="stage-month">2024年4月</div>
                                <div class="stage-title">实战能力检验</div>
                                <div class="stage-goal">
                                    核心目标：比赛节奏把控能力强化<br>
                                    关键训练：每周2次全阵容模拟赛
                                </div>
                                <div class="stage-status upcoming">状态：规划中</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 本月训练统计 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-chart-bar"></i>
                        本月训练统计
                    </h2>
                    <div class="schedule-grid">
                        <div class="schedule-card technical" onclick="showTrainingDetails(1)">
                            <div class="schedule-type-icon">
                                <i class="fas fa-volleyball-ball"></i>
                            </div>
                            <div class="schedule-time">技术训练</div>
                            <div class="schedule-title">扣球技术提升</div>
                            <div class="schedule-description">
                                重点练习扣球技术，包括直线扣球、斜线扣球和吊球技术，提升进攻效率。
                            </div>
                            <div class="training-intensity">
                                训练强度:
                                <div class="intensity-bars">
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar"></div>
                                    <div class="intensity-bar"></div>
                                </div>
                            </div>
                            <div class="schedule-meta">
                                <div class="schedule-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    主体育馆
                                </div>
                                <div class="schedule-coach">
                                    <i class="fas fa-user"></i>
                                    张教练
                                </div>
                            </div>
                        </div>
                        
                        <div class="schedule-card fitness" onclick="showTrainingDetails(2)">
                            <div class="schedule-type-icon">
                                <i class="fas fa-heartbeat"></i>
                            </div>
                            <div class="schedule-time">体能训练</div>
                            <div class="schedule-title">爆发力训练</div>
                            <div class="schedule-description">
                                进行爆发力训练，包括跳跃、冲刺和力量训练，提升队员的身体素质。
                            </div>
                            <div class="training-intensity">
                                训练强度:
                                <div class="intensity-bars">
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar"></div>
                                </div>
                            </div>
                            <div class="schedule-meta">
                                <div class="schedule-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    训练馆
                                </div>
                                <div class="schedule-coach">
                                    <i class="fas fa-user"></i>
                                    李教练
                                </div>
                            </div>
                        </div>
                        
                        <div class="schedule-card tactical" onclick="showTrainingDetails(3)">
                            <div class="schedule-type-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="schedule-time">战术训练</div>
                            <div class="schedule-title">团队配合</div>
                            <div class="schedule-description">
                                练习团队配合战术，包括快攻、掩护和防守阵型，提升团队默契度。
                            </div>
                            <div class="training-intensity">
                                训练强度:
                                <div class="intensity-bars">
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                    <div class="intensity-bar active"></div>
                                </div>
                            </div>
                            <div class="schedule-meta">
                                <div class="schedule-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    主体育馆
                                </div>
                                <div class="schedule-coach">
                                    <i class="fas fa-user"></i>
                                    王教练
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 队员训练风采 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-user-friends"></i>
                        队员训练风采
                    </h2>
                    <div class="players-showcase" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                        <!-- 队员1 -->
                        <div class="player-card" onclick="showPlayerDetails('李明', '主攻手', '10号', '2年', '本周重点突破后排进攻技术，训练时长累计12小时，扣球成功率提升8%。', 'https://picsum.photos/seed/volleyball1/300/200')">
                            <div class="player-photo" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player1&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="李明AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white;">
                            </div>
                            <div class="player-info">
                                <div class="player-name">李明（主攻手）</div>
                                <div class="player-position">号码：10号 | 入队2年</div>
                                <div class="player-progress">
                                    本周重点突破"后排进攻"技术，训练时长累计12小时，扣球成功率提升8%。
                                </div>
                            </div>
                        </div>
                        <!-- 队员2 -->
                        <div class="player-card" onclick="showPlayerDetails('张晓华', '二传手', '5号', '3年', '专注提升\&quot;二次球\&quot;技术，本周与主攻手配合训练达5次，传球精准度92%。', 'https://picsum.photos/seed/volleyball2/300/200')">
                            <div class="player-photo" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player2&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="张晓华AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white;">
                            </div>
                            <div class="player-info">
                                <div class="player-name">张晓华（二传手）</div>
                                <div class="player-position">号码：5号 | 入队3年</div>
                                <div class="player-progress">
                                    专注提升"二次球"技术，本周与主攻手配合训练达5次，传球精准度92%。
                                </div>
                            </div>
                        </div>
                        <!-- 队员3 -->
                        <div class="player-card" onclick="showPlayerDetails('王芳', '自由人', '1号', '1年', '本月全勤，防守起球率从65%提升至78%，训练感言：\&quot;每一次扑救都是团队胜利的基石\&quot;', 'https://picsum.photos/seed/volleyball3/300/200')">
                            <div class="player-photo" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=player3&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="王芳AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white;">
                            </div>
                            <div class="player-info">
                                <div class="player-name">王芳（自由人）</div>
                                <div class="player-position">号码：1号 | 入队1年</div>
                                <div class="player-progress">
                                    本月全勤，防守起球率从65%提升至78%，训练感言："每一次扑救都是团队胜利的基石"。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 教练团队介绍 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-chalkboard-teacher"></i>
                        教练团队介绍
                    </h2>
                    <div class="coaches-grid">
                        <!-- 教练1 -->
                        <div class="coach-card" onclick="showCoachDetails('张教练', '主攻技术与比赛战术指导', '前省队主力队员，退役后执教8年，擅长制定进攻战术与关键分处理策略，注重队员心理素质培养。', 'https://picsum.photos/seed/coach1/100/100')">



                            <div class="coach-avatar" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px; border-radius: 50%; width: 150px; height: 150px; margin: 0 auto;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=coach1&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="张教练AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white; border-radius: 50%;">
                            </div>
                            <div class="coach-details">
                                <div class="coach-name">张教练</div>
                                <div class="coach-role">主攻技术与比赛战术指导</div>
                                <div class="coach-bio">
                                    前省队主力队员，退役后执教8年，擅长制定进攻战术与关键分处理策略，注重队员心理素质培养。
                                </div>
                            </div>
                        </div>
                        <!-- 教练2 -->
                        <div class="coach-card" onclick="showCoachDetails('李教练', '体能训练与康复指导', '运动训练学硕士，专注排球专项体能训练10年，擅长根据队员身体条件定制训练计划，降低运动损伤风险。', 'https://picsum.photos/seed/coach2/100/100')">
                            <div class="coach-avatar" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px; border-radius: 50%; width: 150px; height: 150px; margin: 0 auto;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=coach2&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="李教练AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white; border-radius: 50%;">
                            </div>
                            <div class="coach-details">
                                <div class="coach-name">李教练</div>
                                <div class="coach-role">体能训练与康复指导</div>
                                <div class="coach-bio">
                                    运动训练学硕士，专注排球专项体能训练10年，擅长根据队员身体条件定制训练计划，降低运动损伤风险。
                                </div>
                            </div>
                        </div>
                        <!-- 教练3 -->
                        <div class="coach-card" onclick="showCoachDetails('王教练', '战术配合与防守指导', '国家高级排球教练，拥有15年执教经验，擅长团队攻防转换战术设计，注重细节打磨与队员默契培养。', 'https://picsum.photos/seed/coach3/100/100')">
                            <div class="coach-avatar" style="display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px; border-radius: 50%; width: 150px; height: 150px; margin: 0 auto;">
                                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=coach3&backgroundColor=4a90e2&backgroundType=solid&eyes=default&mouth=smile" alt="王教练AI头像" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white; border-radius: 50%;">
                            </div>
                            <div class="coach-details">
                                <div class="coach-name">王教练</div>
                                <div class="coach-role">战术配合与防守指导</div>
                                <div class="coach-bio">
                                    国家高级排球教练，拥有15年执教经验，擅长团队攻防转换战术设计，注重细节打磨与队员默契培养。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 训练注意事项 -->
                <div class="schedule-section">
                    <h2 class="section-title">
                        <i class="fas fa-exclamation-circle"></i>
                        训练注意事项
                    </h2>
                    <div class="notes-list">
                        <!-- 注意事项1 -->
                        <div class="note-item">
                            <div class="note-title">
                                <i class="fas fa-user-tie"></i> 着装与装备要求
                            </div>
                            <div class="note-content">
                                训练需穿着专业排球装备，包括：
                                <ul>
                                    <li>排球专用运动鞋（防滑鞋底，保护脚踝）</li>
                                    <li>速干运动衣裤（避免棉质衣物吸汗后增加负担）</li>
                                    <li>护具：主攻/副攻建议佩戴护膝、护肘，自由人建议佩戴护腰</li>
                                    <li>禁止佩戴首饰、手表等硬物，避免训练中受伤</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 注意事项2 -->
                        <div class="note-item">
                            <div class="note-title">
                                <i class="fas fa-heartbeat"></i> 安全与健康提示
                            </div>
                            <div class="note-content">
                                <ul>
                                    <li>训练前必须进行15分钟热身（关节活动+动态拉伸），训练后进行10分钟放松</li>
                                    <li>身体不适需提前告知教练，禁止带伤训练</li>
                                    <li>高强度训练期间每30分钟补充一次电解质水，避免脱水</li>
                                    <li>训练后24小时内出现肌肉酸痛属正常现象，可通过热敷缓解</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 注意事项3 -->
                        <div class="note-item">
                            <div class="note-title">
                                <i class="fas fa-cloud-sun-rain"></i> 特殊情况预案
                            </div>
                            <div class="note-content">
                                <ul>
                                    <li>雨天：室外体能训练调整至训练馆，时间不变</li>
                                    <li>高温（≥35℃）：下午训练提前至上午9:00-11:00进行</li>
                                    <li>临时场地冲突：将通过球队通知调整至备用场地，提前2小时通知</li>
                                    <li>极端天气：训练暂停，后续将安排补训</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 训练详情模态框 -->
    <div class="modal" id="trainingModal">
        <div class="modal-content">
            <button class="modal-close" onclick="closeModal('trainingModal')">&times;</button>
            <h2 class="modal-title" id="modalTitle">训练详情</h2>
            <div class="modal-body">
                <div class="modal-details">
                    <div class="detail-label">日期</div>
                    <div class="detail-value" id="modalDate">-</div>
                    
                    <div class="detail-label">时间</div>
                    <div class="detail-value" id="modalTime">-</div>
                    
                    <div class="detail-label">类型</div>
                    <div class="detail-value" id="modalType">-</div>
                    
                    <div class="detail-label">场地</div>
                    <div class="detail-value" id="modalVenue">-</div>
                    
                    <div class="detail-label">教练</div>
                    <div class="detail-value" id="modalCoach">-</div>
                    
                    <div class="detail-label">强度</div>
                    <div class="detail-value" id="modalIntensity">-</div>
                </div>
                
                <div class="modal-description" id="modalDescription">
                    <!-- 描述内容将通过JS填充 -->
                </div>
                
                <div class="modal-description">
                    <h4>训练内容：</h4>
                    <ul id="modalContent">
                        <!-- 训练内容将通过JS填充 -->
                    </ul>
                </div>
            </div>
            <div class="modal-actions">
                <button class="modal-btn modal-btn-secondary" onclick="closeModal('trainingModal')">关闭</button>
                <button class="modal-btn modal-btn-primary">我要参加</button>
            </div>
        </div>
    </div>

    <!-- 通用详情模态框 -->
    <div class="modal" id="infoModal">
        <div class="modal-content">
            <button class="modal-close" onclick="closeModal('infoModal')">&times;</button>
            <h2 class="modal-title" id="infoModalTitle">详情</h2>
            <div class="modal-body" id="infoModalBody">
                <!-- 内容将通过JS填充 -->
            </div>
            <div class="modal-actions">
                <button class="modal-btn modal-btn-primary" onclick="closeModal('infoModal')">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 训练数据 - 使用importance对应不同训练类型的样式类
        const trainingData = [
            {
                id: 1,
                date: '2024-02-12',
                time: '14:00-16:00',
                type: '技术训练',
                title: '扣球技术训练',
                description: '重点练习扣球技术，提升进攻效率',
                venue: '主体育馆',
                coach: '张教练',
                importance: 'technical',
                intensity: 3,
                content: [
                    '热身与动态拉伸 (15分钟)',
                    '扣球基础动作纠正 (30分钟)',
                    '直线扣球专项练习 (25分钟)',
                    '斜线扣球专项练习 (25分钟)',
                    '吊球技术练习 (20分钟)',
                    '分组对抗应用 (25分钟)',
                    '放松与总结 (10分钟)'
                ]
            },
            {
                id: 2,
                date: '2024-02-13',
                time: '16:00-18:00',
                type: '体能训练',
                title: '爆发力训练',
                description: '进行爆发力训练，提升身体素质',
                venue: '训练馆',
                coach: '李教练',
                importance: 'fitness',
                intensity: 4,
                content: [
                    '热身与关节活动 (15分钟)',
                    '负重深蹲 (3组×12次)',
                    '高翻训练 (3组×10次)',
                    '连续纵跳训练 (3组×15次)',
                    '40米冲刺跑 (5组)',
                    '核心力量训练 (20分钟)',
                    '放松拉伸与恢复 (15分钟)'
                ]
            },
            {
                id: 3,
                date: '2024-02-14',
                time: '14:00-16:00',
                type: '战术训练',
                title: '团队配合训练',
                description: '练习团队配合战术，提升默契度',
                venue: '主体育馆',
                coach: '王教练',
                importance: 'tactical',
                intensity: 5,
                content: [
                    '热身与传球练习 (20分钟)',
                    '快攻战术配合演练 (30分钟)',
                    '防守阵型变换训练 (25分钟)',
                    '攻防转换速度训练 (25分钟)',
                    '视频分析与战术讲解 (15分钟)',
                    '全阵容战术应用 (30分钟)',
                    '总结与调整建议 (15分钟)'
                ]
            },
            {
                id: 4,
                date: '2024-02-15',
                time: '16:00-18:00',
                type: '比赛训练',
                title: '模拟比赛',
                description: '进行模拟比赛，检验训练效果',
                venue: '主体育馆',
                coach: '张教练',
                importance: 'match',
                intensity: 4,
                content: [
                    '赛前热身 (20分钟)',
                    '模拟比赛第一局 (25分钟)',
                    '中场分析与调整 (15分钟)',
                    '模拟比赛第二局 (25分钟)',
                    '关键分处理专项练习 (20分钟)',
                    '模拟比赛第三局 (25分钟)',
                    '赛后总结与点评 (30分钟)'
                ]
            },
            {
                id: 5,
                date: '2024-02-16',
                time: '14:00-16:00',
                type: '技术训练',
                title: '发球技术训练',
                description: '练习发球技术，提升发球成功率',
                venue: '训练馆',
                coach: '李教练',
                importance: 'technical',
                intensity: 3,
                content: [
            '热身与肩部活动 (15分钟)',
            '发球动作纠正与讲解 (20分钟)',
            '上手发球练习 (25分钟)',
            '跳发球技术练习 (30分钟)',
            '发球战术应用 (20分钟)',
            '发球准确性比赛 (20分钟)',
            '放松与技术总结 (10分钟)'
        ]
    },
    {
        id: 6,
        date: '2024-02-16',
        time: '16:30-18:00',
        type: '战术训练',
        title: '比赛录像分析',
        description: '分析上周比赛录像，总结经验教训',
        venue: '战术分析室',
        coach: '王教练',
        importance: 'tactical',
        intensity: 2,
        content: [
            '上周比赛回顾 (20分钟)',
            '进攻战术执行情况分析 (30分钟)',
            '防守漏洞识别与改进 (25分钟)',
            '对手特点分析 (20分钟)',
            '下周比赛战术部署 (25分钟)'
        ]
    },
    {
        id: 7,
        date: '2024-02-17',
        time: '10:00-12:00',
        type: '技术训练',
        title: '拦网技术训练',
        description: '重点练习拦网技术，提升防守能力',
        venue: '主体育馆',
        coach: '张教练',
        importance: 'technical',
        intensity: 4,
        content: [
            '热身与专项拉伸 (15分钟)',
            '拦网基本姿势与移动 (25分钟)',
            '单人拦网技术练习 (20分钟)',
            '双人协同拦网练习 (30分钟)',
            '拦网与防守衔接训练 (20分钟)',
            '实战对抗应用 (30分钟)',
            '放松与技术总结 (10分钟)'
        ]
    },
    {
        id: 8,
        date: '2024-02-18',
        time: '15:00-16:30',
        type: '体能训练',
        title: '恢复性训练',
        description: '进行恢复性训练，缓解一周训练疲劳',
        venue: '训练馆',
        coach: '李教练',
        importance: 'fitness',
        intensity: 2,
        content: [
            '动态热身 (15分钟)',
            '瑜伽拉伸练习 (30分钟)',
            '低强度有氧训练 (20分钟)',
            '核心稳定性训练 (20分钟)',
            '泡沫轴放松 (15分钟)',
            '营养与恢复讲座 (15分钟)'
        ]
    }
];

        // 每日训练内容说明（周一至周五循环）
        const dailyTrainingNotes = [
    "上午：基础传球练习；下午：扣球技术专项训练",
    "上午：体能训练（核心力量）；下午：防守站位练习",
    "上午：发球训练；下午：战术配合演练",
    "上午：攻防转换训练；下午：分组对抗赛",
    "上午：技术纠错与巩固；下午：全阵容合练",
    "上午：进攻战术演练；下午：恢复性训练",
    "下午：恢复性训练；晚上：团队建设活动"
];

        let currentDate = new Date();
        let currentMonth = currentDate.getMonth();
        let currentYear = currentDate.getFullYear();

        // 生成日历
        function generateCalendar() {
            const firstDay = new Date(currentYear, currentMonth, 1);
            const lastDay = new Date(currentYear, currentMonth + 1, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());
            
            const calendarGrid = document.getElementById('calendarGrid');
            calendarGrid.innerHTML = '';
            
            // 添加星期标题
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            weekdays.forEach(day => {
                const dayHeader = document.createElement('div');
                dayHeader.className = 'calendar-day-header';
                dayHeader.textContent = day;
                calendarGrid.appendChild(dayHeader);
            });
            
            // 生成日期
            for (let i = 0; i < 42; i++) {
                const date = new Date(startDate);
                date.setDate(startDate.getDate() + i);
                
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.dataset.date = date.toISOString().split('T')[0];
                
                // 检查是否有训练安排
                const hasTraining = trainingData.some(training => {
                    const trainingDate = new Date(training.date);
                    return trainingDate.toDateString() === date.toDateString();
                });
                
                if (hasTraining) {
                    dayElement.classList.add('has-training');
                    dayElement.addEventListener('click', () => showDayTraining(date));
                }
                
                if (date.getMonth() !== currentMonth) {
                    dayElement.classList.add('other-month');
                }
                
                if (date.toDateString() === new Date().toDateString()) {
                    dayElement.classList.add('today');
                }
                
                const dayNumber = document.createElement('div');
                dayNumber.className = 'day-number';
                dayNumber.textContent = date.getDate();
                dayElement.appendChild(dayNumber);
                
                // 添加训练事件
                const dayTraining = trainingData.filter(training => {
                    const trainingDate = new Date(training.date);
                    return trainingDate.toDateString() === date.toDateString();
                });
                
                dayTraining.forEach(training => {
                    const eventElement = document.createElement('div');
                    eventElement.className = `training-event ${training.importance}`;
                    eventElement.textContent = training.title;
                    eventElement.title = `${training.time} - ${training.description}`;
                    eventElement.addEventListener('click', (e) => {
                        e.stopPropagation();
                        showTrainingDetails(training.id);
                    });
                    dayElement.appendChild(eventElement);
                });

                // 添加每日训练内容小字说明（仅周一至周五）
                const dayOfWeek = date.getDay();
                if (dayOfWeek >= 1 && dayOfWeek <= 5) { // 1=周一，5=周五
                    // 计算循环索引（0-4对应周一至周五）
                    const noteIndex = dayOfWeek - 1;
                    
                    const noteElement = document.createElement('div');
                    noteElement.className = 'daily-training-note';
                    noteElement.textContent = dailyTrainingNotes[noteIndex];
                    dayElement.appendChild(noteElement);
                }
                
                calendarGrid.appendChild(dayElement);
            }
            
            // 更新月份显示
            document.getElementById('currentMonth').textContent = `${currentYear}年${currentMonth + 1}月`;
        }

        // 生成本周训练安排
        function generateWeeklySchedule() {
            const weeklySchedule = document.getElementById('weeklySchedule');
            weeklySchedule.innerHTML = '';
            
            const today = new Date();
            const weekStart = new Date(today);
            weekStart.setDate(today.getDate() - today.getDay());
            
            for (let i = 0; i < 7; i++) {
                const date = new Date(weekStart);
                date.setDate(weekStart.getDate() + i);
                
                const dayTraining = trainingData.filter(training => {
                    const trainingDate = new Date(training.date);
                    return trainingDate.toDateString() === date.toDateString();
                });
                
                if (dayTraining.length > 0) {
                    dayTraining.forEach(training => {
                        const card = document.createElement('div');
                        card.className = `schedule-card ${training.importance}`;
                        card.setAttribute('onclick', `showTrainingDetails(${training.id})`);
                        
                        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                        const weekday = weekdays[date.getDay()];
                        
                        // 根据训练类型设置图标
                        let iconClass = 'fa-volleyball-ball';
                        if (training.importance === 'fitness') iconClass = 'fa-heartbeat';
                        if (training.importance === 'tactical') iconClass = 'fa-users';
                        if (training.importance === 'match') iconClass = 'fa-trophy';
                        
                        // 构建强度指示器
                        let intensityHtml = '<div class="training-intensity">训练强度:';
                        intensityHtml += '<div class="intensity-bars">';
                        for (let j = 0; j < 5; j++) {
                            intensityHtml += `<div class="intensity-bar ${j < training.intensity ? 'active' : ''}"></div>`;
                        }
                        intensityHtml += '</div></div>';
                        
                        card.innerHTML = `
                            <div class="schedule-type-icon">
                                <i class="fas ${iconClass}"></i>
                            </div>
                            <div class="schedule-time">${weekday} ${training.time}</div>
                            <div class="schedule-title">${training.title}</div>
                            <div class="schedule-description">${training.description}</div>
                            ${intensityHtml}
                            <div class="schedule-meta">
                                <div class="schedule-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    ${training.venue}
                                </div>
                                <div class="schedule-coach">
                                    <i class="fas fa-user"></i>
                                    ${training.coach}
                                </div>
                            </div>
                        `;
                        
                        weeklySchedule.appendChild(card);
                    });
                }
            }
        }

        // 上个月
        function previousMonth() {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            generateCalendar();
        }

        // 下个月
        function nextMonth() {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            generateCalendar();
        }

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                // 移动端：切换侧边栏显示/隐藏
                sidebar.classList.toggle('open');
            } else {
                // 桌面端：侧边栏始终可见，不需要切换
                console.log('桌面端侧边栏始终可见');
            }
        }

        // 切换页面
        function switchToMainPage() {
            window.location.href = '../../index.html';
        }

        // 窗口大小改变时处理侧边栏状态
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (!isMobile) {
                // 桌面端：确保侧边栏可见
                sidebar.classList.remove('open');
            }
        });

        // 显示训练详情
        function showTrainingDetails(id) {
            const training = trainingData.find(item => item.id === id);
            if (!training) return;
            
            // 格式化日期
            const dateObj = new Date(training.date);
            const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
            
            // 设置强度显示
            let intensityHtml = '';
            for (let i = 0; i < 5; i++) {
                intensityHtml += `<div class="intensity-bar ${i < training.intensity ? 'active' : ''}"></div>`;
            }
            
            // 填充模态框内容
            document.getElementById('modalTitle').textContent = training.title;
            document.getElementById('modalDate').textContent = formattedDate;
            document.getElementById('modalTime').textContent = training.time;
            document.getElementById('modalType').textContent = training.type;
            document.getElementById('modalVenue').textContent = training.venue;
            document.getElementById('modalCoach').textContent = training.coach;
            document.getElementById('modalIntensity').innerHTML = `<div class="intensity-bars">${intensityHtml}</div>`;
            document.getElementById('modalDescription').textContent = training.description;
            
            // 填充训练内容列表
            const contentList = document.getElementById('modalContent');
            contentList.innerHTML = '';
            training.content.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                contentList.appendChild(li);
            });
            
            // 显示模态框
            document.getElementById('trainingModal').classList.add('active');
        }
        
        // 显示某天的训练安排
        function showDayTraining(date) {
            const dateStr = date.toISOString().split('T')[0];
            const dayTraining = trainingData.filter(training => training.date === dateStr);
            
            if (dayTraining.length === 0) {
                showInfoModal('当天训练安排', '该日没有安排训练');
                return;
            }
            
            let content = `<p><strong>${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日</strong> 共有 ${dayTraining.length} 项训练安排：</p>`;
            content += '<ul>';
            
            dayTraining.forEach(training => {
                content += `
                    <li style="margin-bottom: 15px;">
                        <strong>${training.time}</strong> - ${training.title} (${training.type})<br>
                        地点：${training.venue} | 教练：${training.coach}<br>
                        ${training.description}
                        <button class="modal-btn modal-btn-secondary" style="margin-top: 8px;" onclick="showTrainingDetails(${training.id}); closeModal('infoModal')">查看详情</button>
                    </li>
                `;
            });
            
            content += '</ul>';
            
            showInfoModal('当日训练安排', content);
        }
        
        // 显示统计详情
        function showStatDetails(title, value, description) {
            const content = `
                <div style="text-align: center; margin-bottom: 20px;">
                    <div style="font-size: 2.5rem; font-weight: bold; color: var(--primary-color);">${value}</div>
                </div>
                <div style="line-height: 1.6;">${description}</div>
            `;
            showInfoModal(title, content);
        }
        
        // 显示阶段详情
        function showStageDetails(title, month, goal, content) {
            const stageContent = `
                <div class="modal-details">
                    <div class="detail-label">阶段</div>
                    <div class="detail-value">${month}</div>
                    
                    <div class="detail-label">核心目标</div>
                    <div class="detail-value">${goal}</div>
                </div>
                <div style="margin-top: 20px; line-height: 1.6;">
                    <h4>训练内容：</h4>
                    <p>${content}</p>
                </div>
            `;
            showInfoModal(title, stageContent);
        }
        
        // 显示队员详情
        function showPlayerDetails(name, position, number, tenure, progress, imgSrc) {
            const playerContent = `
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px; border-radius: 5px; flex-shrink: 0;">
                        <img src="${imgSrc}" alt="${name}" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white;">
                    </div>
                    <div>
                        <h3 style="margin: 0 0 10px 0; color: var(--primary-color);">${name}</h3>
                        <div class="modal-details" style="margin-bottom: 0;">
                            <div class="detail-label">位置</div>
                            <div class="detail-value">${position}</div>
                            
                            <div class="detail-label">号码</div>
                            <div class="detail-value">${number}</div>
                            
                            <div class="detail-label">入队时间</div>
                            <div class="detail-value">${tenure}</div>
                        </div>
                    </div>
                </div>
                <div style="line-height: 1.6;">
                    <h4>近期训练情况：</h4>
                    <p>${progress}</p>
                </div>
            `;
            showInfoModal(`${name} 详情`, playerContent);
        }

        // 显示教练详情
        function showCoachDetails(name, role, bio, imgSrc) {
            const coachContent = `
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; background-color: #4a90e2; padding: 15px; border-radius: 50%; flex-shrink: 0;">
                        <img src="${imgSrc}" alt="${name}" style="width: 80%; height: 80%; object-fit: cover; border: 5px solid white; border-radius: 50%;">
                    </div>
                    <div>
                        <h3 style="margin: 0 0 10px 0; color: var(--primary-color);">${name}</h3>
                        <div style="color: var(--secondary-color); font-size: 1rem; margin-bottom: 10px;">${role}</div>
                    </div>
                </div>
                <div style="line-height: 1.6;">
                    <h4>教练简介：</h4>
                    <p>${bio}</p>
                </div>
            `;
            showInfoModal(`${name} 简介`, coachContent);
        }
        
        // 显示通用信息模态框
        function showInfoModal(title, content) {
            document.getElementById('infoModalTitle').textContent = title;
            document.getElementById('infoModalBody').innerHTML = content;
            document.getElementById('infoModal').classList.add('active');
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
        }
        
        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            const modals = document.querySelectorAll('.modal');
            modals.forEach(modal => {
                if (event.target === modal) {
                    modal.classList.remove('active');
                }
            });
        });
        
        // 筛选训练
        function filterTrainings() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const typeFilter = document.getElementById('typeFilter').value;
            const coachFilter = document.getElementById('coachFilter').value;
            const venueFilter = document.getElementById('venueFilter').value;
            
            // 获取所有训练卡片
            const trainingCards = document.querySelectorAll('.schedule-card');
            
            trainingCards.forEach(card => {
                // 获取卡片数据
                const title = card.querySelector('.schedule-title').textContent.toLowerCase();
                const description = card.querySelector('.schedule-description').textContent.toLowerCase();
                const type = card.querySelector('.schedule-time').textContent.split(' ')[0];
                const coach = card.querySelector('.schedule-coach').textContent.trim().replace(/^.*\s/, '');
                const venue = card.querySelector('.schedule-location').textContent.trim().replace(/^.*\s/, '');
                
                // 应用筛选条件
                const matchesSearch = title.includes(searchTerm) || description.includes(searchTerm);
                const matchesType = !typeFilter || type === typeFilter;
                const matchesCoach = !coachFilter || coach === coachFilter;
                const matchesVenue = !venueFilter || venue === venueFilter;
                
                // 显示或隐藏卡片
                if (matchesSearch && matchesType && matchesCoach && matchesVenue) {
                    card.style.display = '';
                    // 添加淡入动画
                    card.style.opacity = '0';
                    setTimeout(() => {
                        card.style.opacity = '1';
                    }, 50);
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 初始化页面
        generateCalendar();
        generateWeeklySchedule();
    </script>
</body>
</html>
